//一级分类列表
'use strict';
import React,{Component} from 'react';
import Header from '../common/header';
import  Util from  '../common/util';
import  * as URLconstant from '../constant/URLconstant'
import GoodsList from '../goods/goodsList'
import Toast from '../common/ToastUtil'
import {
    View,
    Text,
    ScrollView,
    TouchableOpacity,
    Image,
    StyleSheet
} from 'react-native';

export default class firstCategory extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            loaded: false,
            selectCate:'',
            attrId:[]
        }

    }

    componentDidMount() {
        this.getCategory()
    }

    getCategory() {
        let datakey = [];
        let url = URLconstant.CATEGORY;
        Util.get(url, datakey, this.successBack.bind(this), this.errorCallBack.bind(this))

    }

    successBack(datas) {
        //LOG(JSON.stringify(datas))
        if (datas.status == 0) {
            let cateData = datas.data
            this.setState({
                cateData:cateData,
                loaded:true
            })
        }
    }

    errorCallBack(err) {
        LOG(err)
    }


    //选择分类
    selectCate(item){
        this.setState({
            selectCate:item
        })
    }

    selectAttr(id,info){
        let attrId = this.state.attrId
        let index = this.isInArray(id)
        if(index==-1){
            for(let i=0;i<info.length;i++){
                let index = attrId.indexOf(info[i].id)
                if(index>-1){
                    attrId.splice(index,1)
                }
            }
            attrId.push(id)
        }else{
            attrId.splice(index,1)
        }
        this.setState({
            attrId:attrId
        })
    }


    isInArray(str){
        let list = this.state.attrId
       return list.indexOf(str)
    }

    showCateView(){
        let cateData = this.state.cateData
        let selectCate = this.state.selectCate
        return(
            <View>
                <View style={[styles.rows_view,{marginBottom:10}]}>
                    {
                        cateData.map((item,index)=>{
                            return(
                                <TouchableOpacity onPress={()=>this.selectCate(item)} key={index} style={[styles.rows_item,selectCate.cate_id&&selectCate.cate_id==item.cate_id?styles.select_item:null,index%3==2?styles.no_margin:null]}>
                                    <Text style={selectCate.cate_id==item.cate_id?{fontSize:14,color:"#fff"}:{fontSize:14,color:"#333"}}>{item.cate_name}</Text>
                                </TouchableOpacity>
                            )
                        })
                    }
                </View>
                {
                    !selectCate?null:
                        <View>
                            {
                                selectCate.attr.map((item,index)=>{
                                    return(
                                        <View key={index} style={styles.attr_view}>
                                            <View style={{paddingBottom:10,paddingTop:5}}>
                                                <Text>{item.option_name}</Text>
                                            </View>
                                            <View style={styles.rows_view}>
                                                {
                                                    item.info.map((cate,index2)=>{
                                                        return(
                                                            <TouchableOpacity
                                                                onPress={()=>this.selectAttr(cate.id,item.info)}
                                                                key={index2} style={[styles.cate_normal_item,index2%3==2?styles.no_margin:null,this.isInArray(cate.id)==-1?null:styles.select_item]}>
                                                                <Text style={this.isInArray(cate.id)==-1?{fontSize:14,color:"#333"}:{fontSize:14,color:"#fff"}}>{cate.name}</Text>
                                                            </TouchableOpacity>
                                                        )
                                                    })
                                                }
                                            </View>
                                        </View>
                                    )
                                })
                            }
                        </View>
                }
            </View>
        )
    }

    //重置
    cancelSelect(){
        this.setState({
            selectCate:'',
            attrId:[]
        })
    }
    //提交
    submitSelect(){
        let selectCate = this.state.selectCate
        if(!selectCate){
            Toast.show('请先选择分类和属性')
            return false
        }
        let attrId = this.state.attrId
        LOG('attrId==='+attrId)
        this.props.navigator.push({
            component:GoodsList,
            passProps:{
                cate_id:selectCate.cate_id,
                attr_id:attrId.toString(),
                title:selectCate.cate_name
            }
        })
    }


    render() {
        return (
            <View style={{flex:1,backgroundColor:"#f0f0f0"}}>
                <Header navigator={this.props.navigator} initObj={{ title: '分类',id:1}}/>
                {
                    !this.state.loaded?
                       <View style={{flex:1}}>
                           {Util.loading()}
                       </View>:
                        <View style={{flex:1}}>
                            <ScrollView style={{flex:1,padding:15}}>
                                {this.showCateView()}
                            </ScrollView>
                            <View style={{flexDirection:'row'}}>
                                <TouchableOpacity
                                    onPress={()=>this.cancelSelect()}
                                    style={styles.cancel_btn}>
                                    <Text style={{fontSize:14,color:"#333"}}>重 置</Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    onPress={()=>this.submitSelect()}
                                    style={styles.submit_btn}>
                                    <Text style={{fontSize:14,color:"#fff"}}>确 认</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                }
            </View>
        )

    }
}
var styles = StyleSheet.create({
    rows_view:{
        flexDirection:'row',
        flexWrap:'wrap',
    },
    rows_item:{
        width:(Util.size.width-50)/3,
        height:35,
        alignItems:"center",
        justifyContent:"center",
        backgroundColor:"#fff",
        marginRight:10,
        marginBottom:10
    },
    select_item:{
        backgroundColor:"#ee2319"
    },
    no_margin:{
        marginRight:0
    },
    white_bg:{
        backgroundColor:"#fff"
    },
    attr_view:{
        paddingHorizontal:10,
        paddingVertical:5,
        backgroundColor:"#fff",
        marginBottom:15
    },
    cate_normal_item:{
        width:(Util.size.width-70)/3,
        height:35,
        alignItems:"center",
        justifyContent:"center",
        backgroundColor:"#f2f2f2",
        marginRight:10,
        marginBottom:10
    },
    cancel_btn:{
        flex:1,
        alignItems:"center",
        justifyContent:"center",
        height:50,
        backgroundColor:"#fff"
    },
    submit_btn:{
        flex:1,
        alignItems:"center",
        justifyContent:"center",
        height:50,
        backgroundColor:"#ee2319"
    }
})